<?php
/* @var $this SiteController */

$baseUrl = Yii::app()->request->baseUrl;
Yii::app()->clientScript->registerCssFile($baseUrl.'/css/owl.carousel.css');
Yii::app()->clientScript->registerCssFile($baseUrl.'/css/owl.theme.css');
Yii::app()->clientScript->registerScriptFile($baseUrl.'/js/owl.carousel.min.js');
?>
<div class="container">
   <div class="main-content">
      <div class="top-content">
         <div class="left-container">
            <div class="left-column col">
               <?php if(count($top_news) > 0){?>
                  <div class="slide-container">
                     <div id="owl-demo">
                        <?php 
                        $i = 0;
                        foreach($top_news as $key=>$value){
                           $i++;
                           $link = News::model()->getDetailLink($value->id,$value->title);
                           ?>
                           <a href="<?php echo $link?>">
                              <div class="item relative">
                                 <div class="img-wrap">
                                    <img data-original="" src="<?php echo News::model()->getImageThumbnail($value->image,600,$value->type)?>" alt="<?php echo $value->title;?>"/>   
                                 </div>
                                 <div class="title absolute">
                                    <span><?php echo $value->title?></span>
                                 </div>
                              </div>
                           </a>
                        <?php 
                        unset($top_news[$key]);
                        if($i == 3) break;
                        }?>
                     </div>
                  </div>
               <?php }?>
               <div class="special-news">
                  <?php if(count($top_news) > 0){?>
                     <ul class="list-news">
                        <?php 
                        $i = 0;
                        foreach($top_news as $key=>$value){   
                           $i++;
                           $link = News::model()->getDetailLink($value->id,$value->title);
                        ?>
                        <li class="news-item <?php echo ($i%4 == 1) ? 'no-margin-left' : ''?>">
                           <a href="<?php echo $link?>" >
                              <div class="img-wrap">
                                 <img class="lazy" data-original="<?php echo News::model()->getImageThumbnail($value->image,320,$value->type)?>" src="<?php echo $baseUrl?>/images/grey.gif" alt="<?php echo $value->title;?>"/>
                              </div>
                              <div class="title"><span title="<?php echo $value->title?>"><?php echo $value->title?></span></div>
                           </a>
                        </li>
                        <?php 
                           unset($top_news[$key]);
                           if($i == 8) break;
                        }?>
                     </ul>
                  <?php }?>
               </div>
            </div>
            <div class="middle-column col hot-news block-small">
               <div class="heading">
                  <span>Tin hot</span>
               </div>
               <?php if(count($top_news) > 0){?>
               <ul class="list-news">
                  <?php 
                  $i = 0;
                  foreach($top_news as $key=>$value){
                     $i++;
                     $link = News::model()->getDetailLink($value->id,$value->title);                        
                     ?>
                     <li class="news-item">
                        <a href="<?php echo $link?>">
                           <div class="title">
                              <span title=""><?php echo $value->title;?></span>
                           </div>
                        </a>
                     </li>
                  <?php 
                     unset($top_news[$key]);
                     if($i == 10) break;
                  }?>
               </ul>
               <?php }?>
            </div>
         </div>
         <div class="right-column col ads">
            
            
            <?php $target_time = strtotime('2015-04-30');
               $count_down = ceil(($target_time-time())/86400);
            ?>
            <p> Chỉ còn <br /><strong><?php echo $count_down ?></strong>  ngày nữa <br /> là đến <br /><strong>30/04 - 01/05</strong></p>
            <img alt="lich-tet-2015" src="images/tet-2015.png" />
         </div>
         <div class="clear"></div>
      </div>
      <div class="clear"></div>
      <div class="bottom-content">
         <div class="left-content">
            <?php if(count($block_news) > 0){
               foreach($block_news as $block_item){
                  $list_news = isset($block_item['list_news']) ? $block_item['list_news'] : array();
                  if(count($list_news > 0)){?>
                     <div class="block-news">
                        <div class="heading">
                           <span class="uppercase"><?php echo $block_item['cat_name']?></span>
                        </div>
                        <?php $i = 0;
                        foreach($list_news as $news_item){
                           $i++;
                           $link = News::model()->getDetailLink($news_item->id,$news_item->title);
                           ?>
                           <?php if($i <=2 ){?>
                              <li class="news-item large <?php echo count($list_news)?>">
                                 <div class="wapper">
                                    <a href="<?php echo $link?>">
                                       <div class="img-wrap">
                                          <img class="lazy" data-original="<?php echo News::model()->getImageThumbnail($news_item->image,600,$news_item->type)?>" src="<?php echo $baseUrl?>/images/grey.gif" alt="<?php echo $news_item->title;?>"/>
                                       </div>                                                
                                       <div class="title">
                                          <span title="<?php echo $news_item->title?>"><?php echo $news_item->title?></span>
                                       </div>
                                    </a>
                                 </div>
                              </li>
                           <?php }else if($i > 2 && $i <= 10){?> 
                              <li class="news-item small">
                                 <span class="dots"></span>
                                 <div class="title">
                                    <span title="<?php echo $news_item->title?>"><?php echo $news_item->title?></span>
                                 </div>
                              </li>
                           <?php }else{?>
                              <li class="news-item medium">
                                 <a href="<?php echo $link?>">
                                    <div class="img-wrap">
                                       <img class="lazy" data-original="<?php echo News::model()->getImageThumbnail($news_item->image,320,$news_item->type)?>" src="<?php echo $baseUrl?>/images/grey.gif" alt="<?php echo $news_item->title;?>"/>
                                    </div>
                                    <div class="title">
                                       <span title="<?php echo $news_item->title?>"><?php echo $news_item->title?></span>
                                    </div>
                                 </a>
                              </li>
                           <?php }?>
                        <?php }?>
                        
                     </div>
                  <?php }?>
               <?php }?>
            <?php }?>
         </div><!-- End left-content -->
         <div class="right-content" id="right_content">
            <?php $this->renderPartial('/layouts/blocks/right_block')?>
         </div>
      </div><!-- End bottom-content -->
   </div>
</div>
<script>
   $(document).ready(function() {
 
     $("#owl-demo").owlCarousel({
    
         navigation : true, // Show next and prev buttons
         slideSpeed : 300,
         paginationSpeed : 400,
         autoPlay : 10000,
         stopOnHover:true,
         singleItem:true,
         navigationText:['',''],
         pagination:false,
    
     });
     $("img.lazy").lazyload({
       effect : "fadeIn"
     });
    
   });
</script>

